<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: Hyperion
 * @LastEditTime: 2021-07-16 11:09:56
-->
<template>
  <div>
    <!-- 头部 -->
    <!-- <Header/> -->
    <!-- /头部 -->

    <div class="container">
      <!-- 粘性导航 -->
      <div class="sticky-nav">
        <a href="https://segmentfault.com/channel/frontend" target="_blank">前端</a>
        <a href="https://segmentfault.com/channel/backend" target="_blank">后端</a>
        <a href="https://segmentfault.com/channel/miniprogram" target="_blank">小程序</a>
        <a href="https://segmentfault.com/channel/ios" target="_blank">iOS</a>
        <a href="https://segmentfault.com/channel/android" target="_blank">Android</a>
        <a href="https://segmentfault.com/channel/toolkit" target="_blank">工具</a>
        <a href="https://segmentfault.com/channel/programmer" target="_blank">程序员</a>
        <a href="https://segmentfault.com/channel/ai" target="_blank">AI</a>
        <a href="https://segmentfault.com/channel/cloud" target="_blank">云计算</a>
        <a href="https://segmentfault.com/channel/netsec" target="_blank">安全</a>
        <a href="https://segmentfault.com/channel/oss" target="_blank">开源</a>
        <a href="https://segmentfault.com/channel/bc" target="_blank">区块链</a>
        <a href="https://segmentfault.com/channel/industry" target="_blank">行业</a>
        <a href="https://segmentfault.com/channel/game" target="_blank">游戏</a>
        <a href="https://segmentfault.com/channel/fintech" target="_blank">金融科技</a>
      </div>
      <!-- /粘性导航 -->

      <!-- 列表 -->
      <div class="articles">
        <h2 class="list">{{ name }}</h2><hr />
        <div class="article" v-for="item in articleData.list" :key="item.id" @click="toArticle(item.id)">
          <div class="cover" :style="{ backgroundImage: `url(${item.cover})` }"></div>
          <div class="info">
            <h3 class="title">{{ item.title }}</h3>
            <span class="author">作者：{{ item.baseUser.realname }}</span>
            <span class="publish_time">发布：{{ item.publishTime | fmtDate }}</span>
            <span class="read_times">阅读：{{ item.readTimes }}</span>
          </div>
        </div>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="pageChangeHandler"
            :current-page="articleData.page"
            :page-size="articleData.pageSize"
            :total="articleData.total"
            :hide-on-single-page="articleData.total <= articleData.pageSize ? true : false"
          />
        </div>
        <!-- /分页 -->
      </div>
      <!-- /列表 -->

      <div class="right_wrapper">
        <!-- 热门标签 -->
        <div class="card hot_tags">
          <div class="head">
            <h5>热门标签</h5>
            <a href="">全部</a>
          </div>
          <div class="body">
            <a href="https://segmentfault.com/t/javascript/blogs" target="_blank" class="tag" data-tag="javascript"></a>
            <a href="https://segmentfault.com/t/php/blogs" target="_blank" class="tag" data-tag="php"></a>
            <a href="https://segmentfault.com/t/java/blogs" target="_blank" class="tag" data-tag="java"></a>
            <a href="https://segmentfault.com/t/vue.js/blogs" target="_blank" class="tag" data-tag="vue.js"></a>
            <a href="https://segmentfault.com/t/css/blogs" target="_blank" class="tag" data-tag="css"></a>
            <a href="https://segmentfault.com/t/html5/blogs" target="_blank" class="tag" data-tag="html5"></a>
            <a href="https://segmentfault.com/t/python/blogs" target="_blank" class="tag" data-tag="python"></a>
            <a href="https://segmentfault.com/t/node.js/blogs" target="_blank" class="tag" data-tag="node.js"></a>
            <a href="https://segmentfault.com/t/android/blogs" target="_blank" class="tag" data-tag="android"></a>
            <a href="https://segmentfault.com/t/mysql/blogs" target="_blank" class="tag" data-tag="mysql"></a>
            <a href="https://segmentfault.com/t/react.js/blogs" target="_blank" class="tag" data-tag="react.js"></a>
            <a href="https://segmentfault.com/t/linux/blogs" target="_blank" class="tag" data-tag="linux"></a>
            <a href="https://segmentfault.com/t/ios/blogs" target="_blank" class="tag" data-tag="ios"></a>
            <a href="https://segmentfault.com/t/git/blogs" target="_blank" class="tag" data-tag="git"></a>
            <a href="https://segmentfault.com/t/golang/blogs" target="_blank" class="tag" data-tag="golang"></a>
            <a href="https://segmentfault.com/t/spring/blogs" target="_blank" class="tag" data-tag="spring"></a>
            <a href="https://segmentfault.com/t/docker/blogs" target="_blank" class="tag" data-tag="docker"></a>
            <a href="https://segmentfault.com/t/程序员/blogs" target="_blank" class="tag" data-tag="程序员"></a>
          </div>
        </div>
        <!-- /热门标签 -->

        <!-- 热门文章 -->
        <div class="card hot_articles">
          <div class="head">
            <h5>热门文章</h5>
          </div>
          <ul>
            <li><a href="https://segmentfault.com/a/1190000040352390" target="_blank">中国唯一一位女性 Apache Member 潘娟：我们还是要走出自己与众不同的 My Way</a></li>
            <li><a href="https://segmentfault.com/a/1190000040352010" target="_blank">MySQL 那些常见的错误设计规范</a></li>
            <li><a href="https://segmentfault.com/a/1190000040353759" target="_blank">javascript 数据结构之二叉搜索树</a></li>
            <li><a href="https://segmentfault.com/a/1190000040350240" target="_blank">Spring Boot 2.x基础教程：使用@Scheduled实现定时任务</a></li>
            <li><a href="https://segmentfault.com/a/1190000040348925" target="_blank">如何打造高效好用的终端？拿来吧你！</a></li>
            <li><a href="https://segmentfault.com/a/1190000040352998" target="_blank">听说过对 Go map 做 GC 吗？</a></li>
            <li><a href="https://segmentfault.com/a/1190000040350732" target="_blank">尤大亲自评测 Vue3 和 Svelte(19个组件后Vue更好!)</a></li>
          </ul>
        </div>
        <!-- /热门文章 -->
      </div>
      
    </div>

    <!-- 尾部 -->
    <Footer/>
    <!-- /尾部 -->
  </div>
</template>

<script>
// import Header from './components/Header';
import Footer from './components/Footer';
import { get } from "../utils/request";
export default {
  watch: {
    "$route.query": {
      handler(query) {
        let categoryId = query.categoryId;
        if (categoryId) this.param.categoryId = categoryId;
        let name = query.name;
        if (name) this.name = name;
        this.loadArticles();
      },
      deep: true,
    },
  },
  components: {
    // Header,
    Footer,
  },
  data() {
    return {
      articleData: {},
      param: {
        page: 1,
        pageSize: 5,
      },
      name: "文章列表",
    };
  },
  methods: {
    toArticle(id) {
      this.$router.push({
        path: "/article",
        query: { id },
      });
    },
    pageChangeHandler(page) {
      this.param.page = page;
      this.loadArticles();
    },
    loadArticles() {
      let url = "/index/article/pageQuery";
      get(url, this.param).then((resp) => {
        this.articleData = resp.data;
      });
    },
  },
  created() {
    let categoryId = this.$route.query.categoryId;
    if (categoryId) this.param.categoryId = categoryId;
    let name = this.$route.query.name;
    if (name) this.name = name;
    this.loadArticles();
  },
};
</script>

<style>
  body {
    font-family: sans-serif;
    background-color: #F7F7F7;
  }
</style>

<style scoped>
.container {
  margin: 20px 5vw;
  display: flex;
}
.sticky-nav {
  position: sticky;
  top: 80px;
  flex: 1;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
.sticky-nav a {
  height: 24px;
  padding: 8px 16px;
  text-decoration: none;
  color: #212529;
  font-size: 16px;
}
.sticky-nav a::before {
  content: "#";
  display: inline;
  color: #BC3FBC;
  padding-right: 8px;
}
.sticky-nav a:hover {
  background-color: #eee;
  border-radius: 4px;
}
.articles {
  min-height: 80vh;
  flex: 6;
}
.list {
  margin: 0 20px 0;
  height: 30px;
  font-weight: bolder;
  font-size: 30px;
  line-height: 30px;
}
hr {
  margin: 20px;
  border-color: transparent;
  border-bottom-color: #ddd;
}
.articles .article {
  min-width: 300px;
  height: 200px;
  margin: 40px 20px;
  border-radius: 4px;
  display: flex;
  box-shadow: 0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);
  transition: all ease-in-out 0.2s;
}
.articles .article:hover {
  box-shadow: 0 4px 10px rgb(0 0 0 / 15%), 0 0 1px rgb(0 0 0 / 10%);
  color: #BC3FBC;
  cursor: pointer;
  transform: scale(105%);
}
.article .cover {
  background-size: cover;
  background-position: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  flex: 0 0 300px;
}
.article .info {
  box-sizing: border-box;
  padding: 20px 40px;
  background-color: #fff;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  flex: 1 0 270px;
  display: flex;
  flex-direction: column;
}
.info h3.title {
  flex: 5;
}
.info span {
  flex: 2;
  color: #666;
}
.pagination {
  text-align: center;
  margin-top: 0.5em;
}
.right_wrapper {
  height: fit-content;
  padding-left: 20px;
  flex: 2;
}
.right_wrapper .card {
  margin: 24px 0;
  background-color: #fff;
  box-shadow: 0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.card .head {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,0,0,.0625);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .head h5 {
  font-size: 16px;
  margin: 0;
}
.card .head a {
  text-decoration: none;
  color: #BC3FBC;
}
.card .head a:after {
  content: '>';
  padding-left: 3px;
}
.card .head a:hover {
  color: #004a2e;
}
.hot_tags .body {
  padding: 16px;
}
.hot_tags .body a.tag {
  display: inline-block;
  font-size: 12px;
  padding: 0 6px;
  margin: 4px;
  height: 24px;
  line-height: 24px;
  border-radius: 3px;
  background-color: #ebeef5;
  color: #82848a;
}
.hot_tags .body a.tag::after {
  content: attr(data-tag);
}
.hot_tags .body a.tag:hover {
  filter: brightness(75%);
  transition: all .1s ease;
}
.hot_tags .body a.tag[data-tag="javascript"] {
  background: #f7df1e;
  color: #212529;
}
.hot_tags .body a.tag[data-tag="php"] {
  background: #8892bf;
  color: #212529;
}
.hot_tags .body a.tag[data-tag="vue.js"] {
  background: #40b883;
  color: #fff;
}
.hot_tags .body a.tag[data-tag="html5"] {
  background: #e44d26;
  color: #fff;
}
.hot_tags .body a.tag[data-tag="python"] {
  background: #3776ab;
  color: #fff;
}
.hot_tags .body a.tag[data-tag="node.js"] {
  background: #333;
  color: #4bae4f;
}
.hot_tags .body a.tag[data-tag="android"] {
  background: #56a036;
  color: #fff;
}
.hot_tags .body a.tag[data-tag="react.js"] {
  background: #20232a;
  color: #61dafb;
}
.hot_tags .body a.tag[data-tag="ios"] {
  background: #666;
  color: #fff;
}
.hot_tags .body a.tag[data-tag="golang"] {
  background: #7fd5ea;
  color: #212529;
}
.hot_tags .body a.tag[data-tag="docker"] {
  background: #0091e2;
  color: #fff;
}
.hot_tags .body a.tag[data-tag="程序员"] {
  background: #001324;
  color: #00f700;
}
.hot_articles ul {
  list-style: none;
  counter-reset: hotArticle;
}
.hot_articles ul li {
  padding: 12px 20px;
}
.hot_articles ul li:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,.0625);
}
.hot_articles ul li:hover {
  background: #f8f9fa;
}
.hot_articles ul li a {
  display: flex;
  flex: 1;
}
.hot_articles ul li a::before {
  counter-increment: hotArticle;
  content: counter(hotArticle);
  min-width: 18px;
  margin-right: 16px;
  text-align: center;
  color: #fff;
  background-color: #adb5bd;
  border-radius: 4px;
  flex: 0 1 20px;
  align-self: flex-start;
}
.hot_articles ul li:nth-of-type(1) a::before {
  background-color: #e04a1d;
}
.hot_articles ul li:nth-of-type(2) a::before {
  background-color: #f88217;
}
.hot_articles ul li:nth-of-type(3) a::before {
  background-color: #ffb916;
}

@media (max-width: 768px) {
  .container {
    margin: 40px 5vw;
  }
  .articles .article {
    flex-direction: column;
    width: 340px;
    height: auto;
    margin: 20px auto 40px;
  }
  .article .cover {
    flex-basis: 200px;
  }
  .article .info {
    flex-basis: 200px;
  }
}
@media (max-width: 1024px) {
  .right_wrapper {
    display: none;
  }
}
@media (max-width: 628px) {
  .sticky-nav {
    display: none;
  }
}
</style>
